<template>
	<div class="board-column">
		<div class="board-column-header">
			{{ headerText }}
		</div>
		<draggable :list="list"
				   v-bind="$attrs"
				   class="board-column-content"
				   :set-data="setData">
			<div v-for="element in list" :key="element.id" class="board-item">
				{{ element.name }} {{ element.id }}
			</div>
		</draggable>
	</div>
</template>

<script>
	import draggable from '/vue/libs/vuedraggable/vuedraggable.js'

	module.exports = {
		name: 'DragKanbanDemo',
		components: {
			draggable
		},
		props: {
			headerText: {
				type: String,
				default: 'Header'
			},
			options: {
				type: Object,
				default() {
					return {}
				}
			},
			list: {
				type: Array,
				default() {
					return []
				}
			}
		},
		methods: {
			setData(dataTransfer) {
				// to avoid Firefox bug
				// Detail see : https://github.com/RubaXa/Sortable/issues/1012
				dataTransfer.setData('Text', '')
			}
		}
	}
</script>
<style scoped>
	.board-column {
		min-width: 300px;
		min-height: 100px;
		height: auto;
		overflow: hidden;
		background: #f0f0f0;
		border-radius: 3px;
	}

		.board-column .board-column-header {
			height: 50px;
			line-height: 50px;
			overflow: hidden;
			padding: 0 20px;
			text-align: center;
			background: #333;
			color: #fff;
			border-radius: 3px 3px 0 0;
		}

		.board-column .board-column-content {
			height: auto;
			overflow: hidden;
			border: 10px solid transparent;
			min-height: 60px;
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			align-items: center;
		}

			.board-column .board-column-content .board-item {
				cursor: pointer;
				width: 100%;
				height: 64px;
				margin: 5px 0;
				background-color: #fff;
				text-align: left;
				line-height: 54px;
				padding: 5px 10px;
				box-sizing: border-box;
				box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
			}
</style>

